import React, { useState } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { 
  HomeIcon, 
  TableCellsIcon, 
  CalendarIcon, 
  CurrencyYenIcon, 
  TruckIcon, 
  Cog6ToothIcon,
  Bars3Icon,
  XMarkIcon,
  BeakerIcon
} from '@heroicons/react/24/outline';

const Sidebar = ({ isOpen, toggleSidebar }) => {
  // location 变量暂时未使用
  
  const navItems = [
    { name: '仪表盘', path: '/', icon: HomeIcon },
    { name: '车位管理', path: '/parking', icon: TableCellsIcon },
    { name: '预约管理', path: '/reservations', icon: CalendarIcon },
    { name: '收入管理', path: '/income', icon: CurrencyYenIcon },
    { name: '车辆记录', path: '/vehicles', icon: TruckIcon },
    { name: '系统设置', path: '/settings', icon: Cog6ToothIcon },
  ];
  
  return (
    <div className={`fixed inset-y-0 left-0 z-30 w-64 bg-blue-800 text-white transform transition-transform duration-300 ease-in-out lg:translate-x-0 ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}>
      <div className="flex items-center justify-between h-16 px-4 border-b border-blue-700">
        <h1 className="text-xl font-bold">车牌管理系统</h1>
        <button 
          className="p-1 rounded-md lg:hidden focus:outline-none focus:ring-2 focus:ring-white"
          onClick={toggleSidebar}
        >
          <XMarkIcon className="w-6 h-6" />
        </button>
      </div>
      <nav className="mt-5 px-2">
        <ul>
          {navItems.map((item) => (
            <li key={item.path} className="mb-2">
              <NavLink 
                to={item.path}
                className={({ isActive }) => 
                  `flex items-center px-4 py-2 text-sm rounded-md ${
                    isActive 
                      ? 'bg-blue-900 text-white' 
                      : 'text-blue-100 hover:bg-blue-700'
                  }`
                }
              >
                <item.icon className="w-5 h-5 mr-3" />
                {item.name}
              </NavLink>
            </li>
          ))}
          
          <li className="mt-8 border-t border-blue-700 pt-4">
            <NavLink 
              to="/devtools" 
              className={({ isActive }) => 
                `flex items-center px-4 py-2 text-sm rounded-md ${
                  isActive 
                    ? 'bg-yellow-600 text-white' 
                    : 'text-yellow-300 hover:bg-blue-700'
                }`
              }
            >
              <BeakerIcon className="w-5 h-5 mr-3" />
              开发者功能
            </NavLink>
          </li>
        </ul>
      </nav>
    </div>
  );
};

const Header = ({ toggleSidebar }) => {
  return (
    <header className="bg-white shadow-sm h-16 flex items-center px-4">
      <button 
        className="p-1 mr-4 rounded-md lg:hidden focus:outline-none focus:ring-2 focus:ring-blue-500"
        onClick={toggleSidebar}
      >
        <Bars3Icon className="w-6 h-6" />
      </button>
      <h1 className="text-xl font-semibold text-gray-800">车牌管理系统</h1>
    </header>
  );
};

const Layout = ({ children }) => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  
  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };
  
  return (
    <div className="flex h-screen bg-gray-100">
      <Sidebar isOpen={sidebarOpen} toggleSidebar={toggleSidebar} />
      
      <div className="flex-1 flex flex-col lg:ml-64">
        <Header toggleSidebar={toggleSidebar} />
        
        <main className="flex-1 overflow-y-auto p-4">
          {children}
        </main>
      </div>
      
      {/* Overlay */}
      {sidebarOpen && (
        <div 
          className="fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden"
          onClick={toggleSidebar}
        />
      )}
    </div>
  );
};

export default Layout; 